<template>
  <div class="guest-page">

    <!-- 顶部 Banner -->
    <div class="top-image fullscreen-top">
      <div class="breadcrumb-inside">
        当前位置：<a href="/">首页</a> &gt; <a href="#">反馈留言</a>
      </div>
    </div>

    <!-- ✅ 导航标题栏（改成与机构部门一致） -->
    <div class="list">
      <div class="item">
        <span class="item-text">反馈留言</span>
        <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
      </div>
    </div>

    <!-- 正文 -->
    <div class="page-wrap">
      <div class="feedback-container">

        <!-- 左边说明卡片 -->
        <div class="info-card">
          <div class="letter-title">尊敬的访客，您好</div>
          <div class="info-text">
            &nbsp;&nbsp;欢迎您关注 <span class="highlight">技术创新中心</span>。在这里，您可以了解我们的
            <span class="highlight">科研</span>成果、<span class="highlight">技术发展</span>动态、<span class="highlight">人才培养</span>计划、<span class="highlight">创新政策</span>信息以及<span class="highlight">产业协同</span>合作情况。
            <br><br>
            &nbsp;&nbsp;我们非常重视每位访客的反馈，无论是对技术创新的建议、管理优化的意见，还是服务提升的高见，都可能被采纳并反馈到相关部门，为创新中心的发展提供参考。您的智慧与见解是我们前行的重要力量。
            <br><br>
            &nbsp;&nbsp;请放心填写您的意见与建议，我们承诺尊重每一条反馈，并尽可能为每位参与者提供反馈渠道。感谢您的关注、支持与参与！
          </div>
        </div>

        <!-- 右侧表单卡片 -->
        <div class="form-card">
          <el-form
            :model="form"
            ref="formRef"
            label-width="0"
            class="guest-form"
            label-position="top"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入您的姓名" class="large-input"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入您的邮箱" class="large-input"></el-input>
            </el-form-item>

            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入您的电话" class="large-input"></el-input>
            </el-form-item>

            <el-form-item label="反馈类型" prop="feedbackType">
              <el-select v-model="form.feedbackType" placeholder="请选择类型" class="large-input">
                <el-option label="问题反馈" value="问题反馈"></el-option>
                <el-option label="建议" value="建议"></el-option>
                <el-option label="咨询" value="咨询"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="反馈内容" prop="content">
              <el-input
                type="textarea"
                v-model="form.content"
                placeholder="请详细描述您的意见或问题"
                :rows="16"
                class="large-textarea"
              ></el-input>
            </el-form-item>

            <div class="form-actions">
              <el-button type="primary" @click="submitForm" class="submit-btn">提交</el-button>
              <el-button @click="resetForm" class="reset-btn">重置</el-button>
            </div>
          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { addGuestFeedback } from "@/api/contactSys/feedback";

export default {
  name: "GuestFeedback",
  data() {
    return {
      form: {
        name: "",
        email: "",
        phone: "",
        feedbackType: "",
        content: ""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        feedbackType: [{ required: true, message: "请选择反馈类型", trigger: "change" }],
        content: [{ required: true, message: "请输入反馈内容", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) {
          this.$message.warning("请填写完整信息！");
          return;
        }
        addGuestFeedback(this.form)
          .then(() => {
            this.$message.success("提交成功！");
            this.resetForm();
          })
          .catch(() => {
            this.$message.error("提交失败！");
          });
      });
    },
    resetForm() {
      this.$refs.formRef.resetFields();
    }
  }
};
</script>

<style scoped>
/* Banner */
.top-image {
  width: 100%;
  height: 250px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-size: cover;
  background-position: center top;
  position: relative;
}

/* 面包屑 */
.breadcrumb-inside {
  position: absolute;
  bottom: 12px;
  right: 40px;
  font-size: 14px;
  color: white;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.breadcrumb-inside a { color:#fff; }
.breadcrumb-inside a:hover { text-decoration: underline; }

/* ✅ 导航标题栏样式（与机构部门一致） */
.list {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
}
.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 90px;
  background-color: #eae4e4; /* 灰色底框条 */
  z-index: 0;
}
.item {
  position: relative;
  display: inline-block;
  margin-top: -30px;
  z-index: 1;
}
.item-icon {
  display: block;
  position: relative;
  z-index: 1;
}
.item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2;
}

/* 主体区域 */
.page-wrap {
  width: 100%;
  padding: 60px 80px;
  box-sizing: border-box;
}

/* 内容容器 */
.feedback-container {
  display: flex;
  gap: 60px;
  width: 100%;
}
.info-card, .form-card {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  padding: 50px 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  min-height: 700px;
}

/* 左卡片：说明文字 */
.letter-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
}
.info-text {
  font-size: 16px;
  line-height: 2;
  color: #555;
  text-align: justify;
}
.highlight { color: #d32f2f; font-weight: bold; }

/* 表单 */
.guest-form { width: 100%; }
.el-form-item { margin-bottom: 25px; }

.large-input .el-input__inner, .large-input .el-select .el-input__inner {
  font-size: 18px;
  height: 50px;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #ff4d4d;
}
.large-input .el-input__inner::placeholder { color: #999; font-size: 16px; }

.large-textarea .el-textarea__inner {
  font-size: 18px;
  min-height: 250px;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #ff4d4d;
}

/* 按钮区 */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.submit-btn {
  background: linear-gradient(90deg, #ff4d4d, #e60000);
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 12px 40px;
  margin-right: 20px;
  border-radius: 12px;
  transition: 0.3s;
}
.submit-btn:hover {
  background: linear-gradient(90deg, #ff1a1a, #b71c1c);
}
.reset-btn {
  font-size: 18px;
  padding: 12px 40px;
  border-radius: 12px;
  border: 2px solid #d32f2f;
  color: #d32f2f;
  background: #fff;
  transition: 0.3s;
}
.reset-btn:hover {
  color: #fff;
  background: #d32f2f;
}

/* 响应式 */
@media screen and (max-width: 1200px) {
  .feedback-container {
    flex-direction: column;
    gap: 30px;
  }
}
</style>
